<!DOCTYPE html>
<html lang="en">
<head>
	<title>个人网页登录模板</title>

	<meta name="keywords" content="个人网页登录模板"/>
	
	<meta name="description" content="最全的个人网页登录模板下载网站http://cn.inspinia.cn"/>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css"  />
<!-- //font-awesome icons -->
<link href="css/style.css"  rel="stylesheet" type="text/css" media="all" />
</head>
<body>
	<div class="main">
		<h1>Prominent Multi Forms Widget</h1>
		<div class="agile_main_grid">
			<div class="w3_agile_main_left">
				<div class="w3l_main_grid1_w3ls_grid">
					<h3>Sign In</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-user" aria-hidden="true"></i>
								<input type="text" name="Name" placeholder="User Name" required="">
							</div>
							<div class="agileits_w3layouts_user">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" name="Password" placeholder="Password" required="">
							</div>
							<div class="agile_remember">
								<div class="agile_remember_left">
									<div class="check">
										<label class="checkbox"><input type="checkbox" name="checkbox"><i> </i>remember me</label>
									</div>
								</div>
								<div class="agile_remember_right">
									<a href="#">Forgot Password?</a>
								</div>
								<div class="clear"> </div>
							</div>
							<input type="submit" value="Sign In">
							<h4>Continue With</h4>
							<div class="wthree_social_icons">
								<ul>
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
								</ul>
							</div>
							<h5>Don't have an account? <a href="#">Sign Up</a></h5>
						</form>
					</div>
				</div>
				<div class="w3l_main_grid1_w3ls_grid agileinfo_account_reset">
					<h3>Account Reset</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" name="Password" placeholder="New Password" required="">
							</div>
							<div class="agileits_w3layouts_user">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" name="Password" placeholder="Confirm Password" required="">
							</div>
							<p class="asd"><a href="#">Great passwords</a> use upper and lower case
								characters, numbers and symbols like "!@#$*.</p>
							<input type="reset" value="Reset Password">
							<input type="submit" value="Send">
							<h5>Already a member? <a href="#">Sign In</a></h5>
						</form>
					</div>
				</div>
				<div class="w3l_main_grid1_w3ls_grid">
					<h3>Mask / unmask Password</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-envelope-o" aria-hidden="true"></i>
								<input type="email" name="Email" placeholder="Enter your email" required="">
							</div>
							<div class="agileits_w3layouts_user agileits_w3layouts_user1">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" class="w3_pass" name="Password" placeholder="Password" required="">
								<button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
							</div>
							<input type="submit" value="Send">
						</form>
					</div>
				</div>
				<script src="js/jquery.min.js" ></script> 
				<script>
				/* 
				  Switch actions
				*/
				$('.unmask').on('click', function(){
				  
				  if($(this).prev('input').attr('type') == 'password')
					changeType($(this).prev('input'), 'text');
				  
				  else
					changeType($(this).prev('input'), 'password');
				  
				  return false;
				});


				/* 
				  function from : https://gist.github.com/3559343
				  Thank you bminer!
				*/

				function changeType(x, type) {
					if(x.prop('type') == type)
						return x; //That was easy.
					try {
						return x.prop('type', type); //Stupid IE security will not allow this
					} catch(e) {
						//Try re-creating the element (yep... this sucks)
						//jQuery has no html() method for the element, so we have to put into a div first
						var html = $("<div>").append(x.clone()).html();
						var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
						//If no match, we add the type attribute to the end; otherwise, we replace
						var tmp = $(html.match(regex) == null ?
							html.replace(">", ' type="' + type + '">') :
							html.replace(regex, 'type="' + type + '"') );
						//Copy data from old element
						tmp.data('type', x.data('type') );
						var events = x.data('events');
						var cb = function(events) {
							return function() {
								//Bind all prior events
								for(i in events)
								{
									var y = events[i];
									for(j in y)
										tmp.bind(i, y[j].handler);
								}
							}
						}(events);
						x.replaceWith(tmp);
						setTimeout(cb, 10); //Wait a bit to call function
						return tmp;
					}
				}
				</script>
			</div>
			<div class="w3_agile_main_right">
				<div class="w3l_main_grid1_w3ls_grid">
					<h3>Sign Up</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-user" aria-hidden="true"></i>
								<input type="text" name="Name" placeholder="Name" required="">
							</div>
							<div class="agileits_w3layouts_user">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" name="Password" placeholder="Password" required="">
							</div>
							<div class="agileits_w3layouts_user">
								<i class="fa fa-key" aria-hidden="true"></i>
								<input type="password" name="Password" placeholder="Confirm Password" required="">
							</div>
							<div class="agileits_w3layouts_user">
								<i class="fa fa-envelope-o" aria-hidden="true"></i>
								<input type="email" name="Email" placeholder="Email" required="">
							</div>
							<div class="check">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i>i agree to the <span>terms of services</span></label>
							</div>
							<input type="submit" value="Sign Up">
							<h4>Continue With</h4>
							<div class="wthree_social_icons">
								<ul>
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
								</ul>
							</div>
							<h5>Already a member? <a href="#">Sign In</a></h5>
						</form>
					</div>
				</div>
				<div class="w3l_main_grid1_w3ls_grid">
					<h3>Forgot Password</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-envelope-o" aria-hidden="true"></i>
								<input type="email" name="Email" placeholder="Enter your email" required="">
							</div>
							<input type="submit" value="Send">
							<h4>Continue With</h4>
							<div class="wthree_social_icons">
								<ul>
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
								</ul>
							</div>
							<h5>Already a member? <a href="#">Sign In</a></h5>
						</form>
					</div>
				</div>
				<div class="w3l_main_grid1_w3ls_grid">
					<h3>Subscribe Form</h3>
					<div class="w3_agile_main_left_grid_w3_agileits">
						<form action="#" method="post">
							<div class="agileits_w3layouts_user">
								<i class="fa fa-envelope-o" aria-hidden="true"></i>
								<input type="email" name="Email" placeholder="Enter your email" required="">
							</div>
							<input type="submit" value="Subscribe Now">
						</form>
					</div>
				</div>
			</div>
			<div class="clear"> </div>
		</div>
		<div class="agileits_copyright">
			<p>© 2017 Prominent Multi Forms Widget. All rights reserved | Design by <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a></p>
		</div>
	</div>
</body>
</html>